<template>
	<view class="">
		<view class="form-box">
			<uv-form labelPosition="top" :model="data.form" ref="form" labelWidth="80">
				<uv-form-item required label="团队名称" prop="teamName">
					<uv-input v-model="data.form.teamName" placeholder="请输入团队名称">
					</uv-input>
				</uv-form-item>
			</uv-form>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view class="item" v-for="(item,index) in data.list" :key="index" @click="selectItem(item)">
				<img v-show="item.selectd" src="../../../static/img/img/xuanz-icon.png" class="xuanz-icon" alt="">
				<view class="flex-justify-s ">
					<view class="">
						<view class="name">{{item.name}}</view>
						<view class="sfz">{{item.licenseNum}}</view>
					</view>
					<text class="bj" @click.stop="edit(item)">编辑资料</text>
				</view>

			</view>
		</view>
		<view class="btn-b">
			<view class="blue-btn" @click="save">保存</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		entryList,
		saveTeam
	} from '../../../../requestApi/api.js';
	const data = ref({
		form: {
			gameId: '',
			teamName: '',
			commonIds: [],
		},
		id: '', //赛事id
		list: [],
		ids:[],
		info:{},
	})
	onShow(()=>{
		getList();
	})
	onLoad((e) => {
		data.value.id = e.id;
		data.value.form.gameId = e.id;
		data.value.info=e.info?JSON.parse(e.info):{};
		if(data.value.info){
			data.value.form.teamName=data.value.info.teamName;
			data.value.form.id=data.value.info.id;
		}
		// data.value.form.userId = uni.getStorageSync('userInfo').id;
		
	});
	//编辑
	const edit=(item)=>{
		
		let info=JSON.stringify(item)
		console.log(info)
		uni.navigateTo({
			url:`/pages/subpackagesSon/competition/addContestant/addContestant?id=${data.value.id}&info=${info}`
		})
	};
	//保存团队
	const save =()=>{
		// console.log(!data.value.form.teamName || !data.value.form.userId.length)
		if(!data.value.form.teamName || !data.value.form.commonIds.length){
			uni.showToast({
				icon:'none',
				title:'请填写完整信息'
			})
			return;
		}
		saveTeam(data.value.form).then(res=>{
			uni.navigateBack(1)
		})
	};
	//选择成员
	const selectItem=(item)=>{
		 // console.log(555)
		data.value.list.map((itm)=>{
			if(itm.id==item.id){
				itm.selectd=!item.selectd;
			}
			return itm;
		})
		let findIndex=data.value.form.commonIds.findIndex(value=>value.id==item.id);
		if(findIndex>-1){
			//存在
			 data.value.form.commonIds.splice(findIndex,1);
		}else{
			//没有选择
			data.value.form.commonIds.push({id:item.id})
		}
		// console.log(data.value.form.commonIds)
	};
	//获取个人列表
	const getList = () => {
		entryList({
			id: data.value.id
		}).then(res => {
			res.data.map((item) => {
				item.selectd = false;
				return item;
			})
			data.value.list = res.data;
			// console.log(data.value.list)
		})
	};
</script>

<style lang="scss">
	.form-box {
		padding: 32rpx 36rpx 0;
	}

	.list {
		padding: 0 20rpx 200rpx;

		.item {
			height: 148rpx;
			border: 2rpx solid #F2F2F2;
			margin-bottom: 20rpx;
			position: relative;
			padding: 26rpx 30rpx;

			.name {
				font-size: 30rpx;
				font-weight: bold;
				line-height: 42rpx;
				color: #333333;
				margin-bottom: 12rpx;
			}

			.sfz {
				font-size: 20rpx;
				color: #9A9A9A;
				line-height: 28rpx;
			}

			.bj {
				font-size: 24rpx;
				line-height: 30rpx;
				color: #3E67F5;
			}

			.xuanz-icon {
				width: 52rpx;
				height: 40rpx;
				position: absolute;
				top: 0;
				right: 0;
			}


		}
	}

	::v-deep .uv-form-item__body {
		padding: 0 0 10px !important;
	}

	::v-deep .uv-form-item__body__left__content {
		margin-bottom: 10rpx;
	}

	::v-deep .uv-form-item__body__left__content__label {
		color: #585858 !important;
		font-size: 24rpx !important;
	}

	::v-deep .item__body__right__content__icon {
		position: relative;
	}

	::v-deep .uv-icon--right {
		position: absolute;
		right: 24rpx;
		top: -12rpx;
	}

	::v-deep .uv-form-item__body__left__content__required {
		color: #FF2E2E !important;
		font-size: 24rpx !important;
		top: -3px !important;
		font-weight: bold;
		left: -6px !important;

	}
</style>